<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="350" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings - using a font that mimics handwriting
    ctx.font = '22px "Comic Sans MS", cursive, sans-serif';
    ctx.lineWidth = 1.5;
    ctx.lineCap = 'round'; // Gives slightly rounded ends to lines, similar to a pen

    // --- Drawing Components ---

    // Define main coordinates and dimensions
    const sourceX = 80;
    const sourceY = 100;
    const sourceW = 110;
    const sourceH = 90;
    const centerY = sourceY + sourceH / 2;
    const collimatorX = 350;
    const slitSize = 8;
    const dLineY = sourceY + sourceH + 50;

    // 1. Source Oven (S) with Sodium (Na)
    ctx.beginPath();
    ctx.rect(sourceX, sourceY, sourceW, sourceH);
    ctx.stroke();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('S', sourceX + sourceW / 2, sourceY - 5);
    ctx.textBaseline = 'middle';
    ctx.fillText('Na', sourceX + sourceW / 2, centerY);

    // 2. Collimator (C)
    ctx.beginPath();
    ctx.moveTo(collimatorX, sourceY - 20);
    ctx.lineTo(collimatorX, centerY - slitSize / 2);
    ctx.moveTo(collimatorX, centerY + slitSize / 2);
    ctx.lineTo(collimatorX, sourceY + sourceH + 20);
    ctx.stroke();
    ctx.textBaseline = 'bottom';
    ctx.fillText('C', collimatorX, sourceY - 25);

    // 3. Dashed line for the beam path
    ctx.beginPath();
    ctx.setLineDash([8, 6]);
    ctx.moveTo(sourceX + sourceW, centerY);
    ctx.lineTo(collimatorX + 220, centerY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid lines

    // 4. Distance indicator (d)
    ctx.beginPath();
    ctx.moveTo(sourceX + sourceW, dLineY);
    ctx.lineTo(collimatorX, dLineY);
    // Ticks at the ends of the distance line
    ctx.moveTo(sourceX + sourceW, dLineY - 6);
    ctx.lineTo(sourceX + sourceW, dLineY + 6);
    ctx.moveTo(collimatorX, dLineY - 6);
    ctx.lineTo(collimatorX, dLineY + 6);
    ctx.stroke();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('d', (sourceX + sourceW + collimatorX) / 2, dLineY - 2);

    // 5. Output beam section with arrow and labels
    const arrowStartX = collimatorX + 40;
    const arrowLength = 60;
    const arrowTipX = arrowStartX + arrowLength;

    // The arrow itself
    ctx.beginPath();
    ctx.moveTo(arrowStartX, centerY);
    ctx.lineTo(arrowTipX, centerY);
    // Arrowhead
    ctx.moveTo(arrowTipX, centerY);
    ctx.lineTo(arrowTipX - 12, centerY - 7);
    ctx.moveTo(arrowTipX, centerY);
    ctx.lineTo(arrowTipX - 12, centerY + 7);
    ctx.stroke();

    // "beam" and "to experiment" labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('beam', arrowStartX + arrowLength / 2, centerY + 10);
    
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('to experiment', arrowTipX + 15, centerY);

    // 6. Figure Caption
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('Fig. 2.42.', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>